<template>
  <div class="storeDrawerView"  @scroll="scrollEvent">
    <div class="searchBox">
      <i class="iconfont el-icon-close close" @click="$emit('closeDrawer','storePopupShow')"></i>
      <div class="search">
        <i class="iconfont el-icon-search"></i>
        <input v-model="keyword" @keyup.enter="getShopsData()" placeholder="搜索店铺"/>
      </div>
    </div>
    <div class="selectBox">
      <div :class="{'active':order_type==='mix'}" @click="order_type='mix';getShopsData()">综合</div>
      <div :class="{'active':order_type==='sale'}" @click="order_type='sale';getShopsData()">销量</div>
    </div>
    <status-text :status="shopsData.status"></status-text>
    <div class="listBox" v-for="item in shopsData.data">
      <div class="row1">
        <div class="logo">
          <img :src="item.store_logo">
        </div>
        <div class="mid">
          <p>{{ item.store_name }}</p>
          <div><span>{{ item.age }}年老店</span><i></i><span>{{ item.is_carry == 0 ? '支持配送' : '不支持配送' }}</span></div>
        </div>
        <button @click="$emit('sendPopupMsg',item,'store');$emit('close')">发送</button>
      </div>
      <div class="row2">
        <div class="box" v-for="product in item.push_product">
          <img :src="product.main_imgurl">
          <p>¥{{ product.price }}</p>
        </div>

      </div>
    </div>
    <status-text :status="4" v-if="shopsData.noMore"></status-text>
  </div>
</template>

<script>
import StatusText from "../common/statusText";

export default {
  components: {StatusText},
  data() {
    return {
      keyword: '',
      order_type:'',
      shopsData: {
        status: 1,
        data: [],
        page: 1,
        pagesize: 10,
        noMore: false
      }
    }
  },
  created() {
    this.getShopsData();
  },
  methods: {
    scrollEvent(e) {
      if( this.shopsData.noMore){
        return false
      }
      let windowHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
        this.shopsData.page++
        this.getShopsData(true);
      }
    },
    getShopsData(paging=false) {
      if(!paging){
        this.shopsData.page=1;
      }
      this.$http.post('api/root/KefuShop/shops', {
        page: this.shopsData.page,
        pagesize: this.shopsData.pagesize,
        order_type: this.order_type,
        keyword: this.keyword,
      }).then(res => {
        if (res.code === 1) {
          if (this.shopsData.page * this.shopsData.pagesize >= res.data.count) {
            this.shopsData.noMore = true;
          }else {
            this.shopsData.noMore = false;
          }
          if (paging) {
            res.data.data.map(item => {
              this.shopsData.data.push(item);
            });
          } else {
            this.shopsData.data = res.data.data;
          }

          this.shopsData.status = 2;
        } else {
          this.shopsData.status = 3;
          this.$message(res.msg)
        }
      }).catch(err => {
        this.shopsData.status = 3;
        this.$message(err.msg ? err.msg : err.toString())
      })
    }
  }
}
</script>

<style lang="less">
.storeDrawerView {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .searchBox {
    width: 522px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      margin: 0 40px 0 7px;
      font-size: 24px;
      font-weight: 400;
      color: #0A0605;
    }

    .search {
      overflow: hidden;
      flex: 1;
      height: 33px;
      background: #F8F8F8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      color: #939393;

      i {
        font-weight: 400;
        margin: 0 14px;
        font-size: 15px;
      }

      input {
        background: #F8F8F8;
        border: none;
        height: 100%;
        flex: 1;
        outline-style: none;
        font-size: 13px;
      }
    }
  }

  .selectBox {
    width: 522px;
    height: 60px;
    display: flex;
    align-items: center;
    .active{
      color: #C3AB7C;
    }
    div{
      cursor: pointer;
      margin-right: 30px;
    }


    .el-input__inner {
      border: none;
    }

    .screen {
      margin-left: 125px;
      cursor: pointer;

      i {
        margin-left: 3px;
      }
    }

    div {
      font-size: 14px;
      font-weight: 400;
      color: #939393;
    }

    .el-select {
      width: 120px;
    }
  }

  .listBox {
    width: 522px;
    background: #F8F8F8;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;

    .row1 {
      display: flex;
      align-items: center;

      .logo {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      .mid {
        flex: 1;
        height: 56px;
        margin-left: 12px;

        p {
          font-size: 20px;
          font-weight: 400;
          color: #1A1C20;
        }

        div {
          margin-top: 10px;
          font-size: 14px;
          color: #939393;
          font-weight: 400;

          i {
            margin: 0 8px;
            border-left: 1px #939393 solid;
          }
        }
      }

      button {
        background: #C3AB7C;
        width: 92px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        border: none;
        border-radius: 15px;
        cursor: pointer;
      }
    }

    .row2 {
      display: flex;
      flex-wrap: wrap;
      margin-top: 4px;

      .box {
        &:nth-child(3n+2) {
          margin-left: 16px;
          margin-right: 16px;
        }
        overflow: hidden;
        position: relative;
        margin-top: 16px;
        border-radius: 4px;
        width: 150px;
        height: 150px;
      }

      p {
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0px 4px 0px 4px;
        padding: 3px 6px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        background: #000000;
        opacity: 0.5;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
